<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG知识库问答系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.93);
            width: 100%;
            max-width: 900px;
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 85vh;
        }

        .header {
            background: linear-gradient(90deg, #4b6cb7, #182848);
            color: white;
            padding: 20px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header h1 {
            font-size: 1.8rem;
            font-weight: 600;
        }

        .header p {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo i {
            font-size: 2rem;
            color: #64e3ff;
        }

        .chat-container {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .message {
            max-width: 80%;
            padding: 15px 20px;
            border-radius: 18px;
            margin-bottom: 10px;
            position: relative;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            align-self: flex-end;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border-bottom-right-radius: 5px;
        }

        .bot-message {
            align-self: flex-start;
            background: white;
            border: 1px solid #eaeaea;
            border-bottom-left-radius: 5px;
        }

        .message-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .user-message .message-header {
            color: rgba(255, 255, 255, 0.9);
        }

        .bot-message .message-header {
            color: #4b6cb7;
        }

        .message-header i {
            margin-right: 8px;
            font-size: 1.1rem;
        }

        .answer {
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .details {
            background-color: #f8f9ff;
            border-left: 3px solid #4b6cb7;
            padding: 12px 15px;
            border-radius: 8px;
            margin-top: 12px;
        }

        .detail-item {
            display: flex;
            margin-bottom: 8px;
            font-size: 0.95rem;
        }

        .detail-item:last-child {
            margin-bottom: 0;
        }

        .detail-key {
            font-weight: 600;
            min-width: 60px;
            color: #4b6cb7;
        }

        .input-container {
            padding: 15px 20px;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            gap: 10px;
        }

        .input-container input {
            flex: 1;
            padding: 15px 20px;
            border: none;
            background-color: #f5f7fb;
            border-radius: 30px;
            font-size: 1rem;
            outline: none;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .input-container input:focus {
            box-shadow: inset 0 2px 5px rgba(75, 108, 183, 0.2);
        }

        .input-container button {
            background: linear-gradient(90deg, #4b6cb7, #182848);
            color: white;
            border: none;
            border-radius: 50%;
            width: 56px;
            height: 56px;
            font-size: 1.3rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(75, 108, 183, 0.4);
            transition: all 0.3s ease;
        }

        .input-container button:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 18px rgba(75, 108, 183, 0.5);
        }

        .input-container button:active {
            transform: translateY(0);
        }

        .stats {
            font-size: 0.85rem;
            color: #777;
            margin-top: 8px;
            text-align: right;
        }

        .thinking {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            align-self: flex-start;
            background: white;
            border-radius: 18px;
            border-bottom-left-radius: 5px;
        }

        .thinking span {
            margin-left: 10px;
            color: #4b6cb7;
        }

        .dot-flashing {
            position: relative;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #4b6cb7;
            color: #4b6cb7;
            animation: dotFlashing 1s infinite linear alternate;
            animation-delay: 0.5s;
        }

        .dot-flashing::before, .dot-flashing::after {
            content: '';
            display: inline-block;
            position: absolute;
            top: 0;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #4b6cb7;
            color: #4b6cb7;
        }

        .dot-flashing::before {
            left: -15px;
            animation: dotFlashing 1s infinite alternate;
            animation-delay: 0s;
        }

        .dot-flashing::after {
            left: 15px;
            animation: dotFlashing 1s infinite alternate;
            animation-delay: 1s;
        }

        @keyframes dotFlashing {
            0% { background-color: #4b6cb7; }
            50%, 100% { background-color: rgba(75, 108, 183, 0.2); }
        }

        @media (max-width: 768px) {
            .container {
                height: 95vh;
                border-radius: 15px;
            }

            .header {
                padding: 15px;
            }

            .header h1 {
                font-size: 1.4rem;
            }

            .message {
                max-width: 90%;
            }

            .input-container {
                padding: 12px 15px;
            }

            .input-container input {
                padding: 12px 15px;
            }

            .input-container button {
                width: 50px;
                height: 50px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo">
            <i class="fas fa-robot"></i>
            <div>
                <h1>RAG知识库智能问答</h1>
                <p>基于检索增强生成技术的智能问答助手</p>
            </div>
        </div>
        <div class="status">
            <i class="fas fa-circle" style="color: #3de45b;"></i>
            <span>服务在线</span>
        </div>
    </div>

    <div class="chat-container" id="chatContainer">
        <div class="message bot-message">
            <div class="message-header">
                <i class="fas fa-robot"></i> RAG助手
            </div>
            <div class="answer">
                您好！我是基于知识库的智能问答助手，请问您需要了解什么信息？我可以为您提供详细的解答和相关知识点的详细说明。
            </div>
        </div>
    </div>

    <div class="input-container">
        <input type="text" id="userInput" placeholder="请输入您的问题... (例如: 人类眼睛为什么是黑色的?)" autocomplete="off">
        <button id="sendBtn">
            <i class="fas fa-paper-plane"></i>
        </button>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const chatContainer = document.getElementById('chatContainer');
        const userInput = document.getElementById('userInput');
        const sendBtn = document.getElementById('sendBtn');

        // 添加示例问题按钮
        function addExampleQuestions() {
            const examples = [
                "人类眼睛为什么是黑色的?",
                "知识库包含哪些内容?",
                "解释RAG技术的工作原理",
                "虹膜的生物学功能是什么?"
            ];

            const container = document.createElement('div');
            container.className = 'examples';
            container.style.marginTop = '15px';
            container.style.display = 'flex';
            container.style.flexWrap = 'wrap';
            container.style.gap = '10px';

            examples.forEach(question => {
                const btn = document.createElement('button');
                btn.textContent = question;
                btn.style.background = '#eef5ff';
                btn.style.border = '1px solid #4b6cb7';
                btn.style.color = '#4b6cb7';
                btn.style.borderRadius = '20px';
                btn.style.padding = '8px 15px';
                btn.style.fontSize = '0.85rem';
                btn.style.cursor = 'pointer';
                btn.style.transition = 'all 0.2s';

                btn.addEventListener('click', () => {
                    userInput.value = question;
                    sendMessage();
                });

                btn.addEventListener('mouseenter', () => {
                    btn.style.background = '#4b6cb7';
                    btn.style.color = 'white';
                });

                btn.addEventListener('mouseleave', () => {
                    btn.style.background = '#eef5ff';
                    btn.style.color = '#4b6cb7';
                });

                container.appendChild(btn);
            });

            const firstBotMsg = document.querySelector('.bot-message');
            firstBotMsg.appendChild(container);
        }

        addExampleQuestions();

        // 发送消息函数
        function sendMessage() {
            const question = userInput.value.trim();
            if (!question) return;

            // 添加用户消息
            addMessage(question, 'user');
            userInput.value = '';

            // 添加"思考中"状态
            const thinkingDiv = document.createElement('div');
            thinkingDiv.className = 'thinking';
            thinkingDiv.innerHTML = `
                    <div class="dot-flashing"></div>
                    <span>思考中...</span>
                `;
            chatContainer.appendChild(thinkingDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;

            // 模拟API请求
            simulateApiRequest(question)
                .then(response => {
                    // 移除"思考中"状态
                    chatContainer.removeChild(thinkingDiv);

                    // 添加机器人响应
                    addBotMessage(response);
                })
                .catch(error => {
                    chatContainer.removeChild(thinkingDiv);
                    addMessage(`抱歉，发生错误：${error.message}`, 'bot');
                });
        }

        // 添加消息到聊天窗口
        function addMessage(content, sender) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${sender}-message`;

            if (sender === 'user') {
                messageDiv.innerHTML = `
                        <div class="message-header">
                            <i class="fas fa-user"></i> 您
                        </div>
                        <div class="answer">${content}</div>
                    `;

                // 添加用户消息后滚动到底部
                chatContainer.appendChild(messageDiv);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        }

        // 添加机器人响应
        function addBotMessage(response) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message bot-message';

            let detailsHtml = '';
            if (response.data.content.details) {
                detailsHtml = '<div class="details">';
                for (const [key, value] of Object.entries(response.data.content.details)) {
                    detailsHtml += `
                            <div class="detail-item">
                                <span class="detail-key">${key}:</span>
                                <span class="detail-value">${value}</span>
                            </div>
                        `;
                }
                detailsHtml += '</div>';
            }

            messageDiv.innerHTML = `
                    <div class="message-header">
                        <i class="fas fa-robot"></i> RAG助手
                    </div>
                    <div class="answer">${response.data.content.answer}</div>
                    ${detailsHtml}
                    <div class="stats">
                        响应时间: ${(response.data.used_time / 1000).toFixed(2)}秒
                    </div>
                `;

            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // 模拟API请求函数
        function simulateApiRequest(question) {
            return new Promise((resolve, reject) => {
                // 真实环境中应使用fetch API调用您的后端
                fetch('/hello', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ search: question })
                })
                .then(response => response.json())
                .then(data => resolve(data))
                .catch(err => reject(err));

                // // 模拟延迟
                // setTimeout(() => {
                //     // 模拟响应数据
                //     const responses = [
                //         {
                //             code: 200,
                //             msg: "ok",
                //             data: {
                //                 content: {
                //                     answer: "人类眼睛的颜色主要由虹膜中的黑色素含量决定。虹膜含有黑色素细胞，这些细胞分泌的黑色素数量决定了眼睛的颜色。黑色素越多，眼睛颜色越深。",
                //                     details: {
                //                         key1: "虹膜黑色素决定颜色",
                //                         key2: "黑色素含量越高眼睛越黑",
                //                         来源: "生物学知识库"
                //                     }
                //                 },
                //                 used_time: 3456
                //             }
                //         },
                //         {
                //             code: 200,
                //             msg: "ok",
                //             data: {
                //                 content: {
                //                     answer: "RAG（Retrieval-Augmented Generation）是一种结合信息检索和文本生成的技术。它首先从知识库中检索相关文档，然后利用这些文档生成更准确、更有依据的回答。",
                //                     details: {
                //                         技术原理: "检索+生成",
                //                         优势: "减少幻觉，提高准确性",
                //                         应用场景: "知识库问答系统"
                //                     }
                //                 },
                //                 used_time: 4210
                //             }
                //         },
                //         {
                //             code: 200,
                //             msg: "ok",
                //             data: {
                //                 content: {
                //                     answer: "虹膜是眼睛的有色部分，其主要功能是控制瞳孔大小，从而调节进入眼睛的光线量。虹膜包含两种肌肉：瞳孔括约肌和瞳孔开大肌，它们分别在亮光和暗光环境下调节瞳孔大小。",
                //                     details: {
                //                         生物学功能: "调节光线进入",
                //                         组成结构: "瞳孔括约肌和开大肌",
                //                         颜色决定因素: "黑色素含量和分布"
                //                     }
                //                 },
                //                 used_time: 3897
                //             }
                //         }
                //     ];
                //
                //     // 根据问题内容返回不同的模拟响应
                //     let response;
                //     if (question.includes("黑色") || question.includes("眼睛")) {
                //         response = responses[0];
                //     } else if (question.includes("RAG") || question.includes("技术")) {
                //         response = responses[1];
                //     } else if (question.includes("虹膜") || question.includes("生物学")) {
                //         response = responses[2];
                //     } else {
                //         response = responses[Math.floor(Math.random() * responses.length)];
                //     }
                //
                //     resolve(response);
                // }, 1500); // 模拟1.5秒响应时间
            });
        }

        // 事件监听
        sendBtn.addEventListener('click', sendMessage);

        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 初始焦点
        userInput.focus();
    });
</script>
</body>
</html>
